<template>
    <div class="shift-to">
        <van-nav-bar title="转入活期计划" left-arrow @click-left="goBack"/>
        <div>
            <div class="content">
                <div class="out">
                    <label for="balance">可用余额</label>
                    <span style="display:inline-block;width:50%;color:#999">可用余额为{{canUseMoney}} {{getName}}</span>
                    <router-link :to="{name: 'recharge'}" tag="span">充值</router-link>
                </div>
            </div>
            <div class="content">
                <div class="out">
                    <label for="balancer">转入数量</label>
                    <input type="number" v-model="useMoney" :placeholder="getLess" id="balancer">
                </div>
            </div>
        </div>
        <div class="confirm">
            <button type="submit" class="btn" @click="goTo">确认</button>
        </div>
        <div class="explain">
            <div class="title">转入说明</div>
            <div class="con">
                <p>1、当日18:00前转入，预计T+1开始计息；</p>
                <p>2、当日18:00前转入，预计T+2开始计息；</p>
                <p>3、转入不收取任何费用；</p>
            </div>
        </div>

        <!-- 交易密码校验 -->
        <div class="cover" v-if="flagCover">
      <div class="cover-contain">
        <p style="text-align:center;font-weight:bold;font-size:16px;">请输入交易密码</p>
        <p><input v-model="myPass" type="text" placeholder="请输入交易密码" name="" id=""></p>
        <p style="font-size:10px;" @click="goToSet">忘记密码</p>
        <div class="submit">
          <button @click="checkPass" style="margin-top:0" type="submit" class="submit-btn">确定</button>
        </div>
        <img @click="flagCover=false" id="close" src="../../../assets/images/close.png" alt="">
      </div>
    </div>
    </div>
</template>
<script>
import Vue from "vue"
import axios from "axios"
import { coinAssets , addPlanLive , checkPassword , errorCount } from "../../../axios/api.js";
import {
    NavBar,
    Toast
} from "vant"
export default {
    components: {
        [NavBar.name]: NavBar,
        [Toast.name]: Toast,
    },
    data() {
        return {
            myPass:'',
            flagCover:false,
            canUseMoney:'',
            useMoney:'',
            getName:this.$route.query.name,
            getLess:"最少转入"+this.$route.query.less + this.$route.query.name,
            lessM:this.$route.query.less,
            useId:this.$route.query.id3   
        }
    },
    created(){
        if(this.useId == -1){
            this.useId = null
        }
        this.getMoney();
    },
    methods: {
        //忘记交易密码
    goToSet(){
      this.$router.push({name:'passwordSetting'})
    },
        //返回上一页
        goBack() {
            this.$router.go(-1);
        },
        //获取可用余额
        getMoney(){
            coinAssets({
                params:{
                    token:localStorage.getItem('setToken'),
                    virtualWalletId:this.$route.query.id2
                }
            }).then(res => {
                if(res.data.data == null){
                    this.canUseMoney = 0
                }else{
                    this.canUseMoney = res.data.data.coinAssetc
                } 
                console.log(res.data)
            })
        },
        //确认
        goTo(){
            if(this.useMoney < this.lessM){
                Toast('转入数量太少了！')
                return false;
            }
            if(this.useMoney > this.canUseMoney){
                Toast('余额不足！')
                 return false;
            }
            errorCount({
                params:{
                    token:localStorage.getItem('setToken')
                }
            }).then(res => {
                console.log(res.data,999)
                if(res.data.code == 200){
                    this.flagCover = true;
                }else{
                    Toast(res.data.msg)
                    return false;
                }
            })
            
        },
        //校验交易密码
    checkPass(){
      var that = this;
      if(that.myPass == ""){
        Toast('请输入交易密码！')
        return false;
      }
      if(!/^\d{6}$/.test(that.myPass)){
         Toast('交易密码格式有误！')
        return false; 
      }
      checkPassword({
        params:{
          token: localStorage.getItem('setToken'),
          tradePassword:that.myPass
        }
      }).then(res => {  
        if(res.data.code == 200){
          console.log(res.data)
          that.turnInMoney();
        }else{
          Toast('交易密码错误！')
          that.flagCover = false;
        } 
      })
    },
    //转入
    turnInMoney(){
        var that = this;
        $.ajax({  
            type:'post',
            dataType:'json',
            data:{
                token:localStorage.getItem('setToken'),
                currentCoinPlanId:that.$route.query.id1,
                virtualWalletId:that.$route.query.id2,
                amount:that.useMoney,
                userCurrentCoinPlanId:that.useId
            },
            url:window.nowHref + '/userCurrentCoinPlan/add',
            success:function(data){
                console.log(data)
                if(data.code == 200){
                    Toast("转入成功！")
                    that.$router.push({name:'product'})
                }
            }
        })
    }
    }
}
</script>
<style lang="less" scoped>
.shift-to {
    .content {
        border-bottom: 1px solid #ebedf0;
        .out {
            display: flex;
            padding: 10px 15px;
            text-align: left;
            font-size: 14px;
            color: #323233;
            label {
                margin-right: 14px;
            }
            input {
                flex: 1;
                border: 0;
            }
            span {
                margin-left: 10px;
                color: #D1A658;
            }
        }
    }
    .confirm {
        padding: 35px 15px;
        font-size: 14px;
        color: #fff;
        .btn {
            padding: 10px;
            width: 100%;
            height: 1.07rem;
            border: 0;
            border-radius: 3px;
            background: #D1A658;
            outline: none;
        }
    }
    .explain {
        padding: 0 15px;
        text-align: left;
        font-size: 12px;
        color: #969799f5;
        .title {
            padding-bottom: 10px;
            font-size: 14px;
            color: #323233;
        }
        .con {
            p {
                padding-bottom: 10px;
            }
        }
    }
}

.cover {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 99;
  font-size: 14px;
  .cover-contain {
    width: 80%;
    background-color: #fff;
    border-radius: 5px;
    margin: 30vh auto;
    padding: 20px 20px 20px;
    box-sizing: border-box;
    position: relative;
    #close{
            position: absolute;
            right: 7px;
            top: 4px;
            width: 7%;
    }
    P{
      text-align: left;
      margin-bottom: 20px;
      input{
        border: none;
      }
    }
  }
}
.detail{
    width: 90%;
    margin: 30px auto;
    text-align: left;
    font-size: 9px;
    color: #999;
    p:first-child{
        font-size: 12px;
    }
}

.submit {
  margin-top: 0.67rem;
  width: 100%;
  background-color: #fff;
  color: #fff;
  font-size: 14px;
  .submit-btn {
    width: 85%;
    height: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 14px;
    background-color: #d6ab6f;
    color: white;
    border-radius: 20px;
    margin: 10vh auto 0;
    border: 0;
  }
}
</style>
